<template>
    <div class="property" :class="readonly ? 'readonly_true' : ''">
        <DatesProp :propertyName="propertyName" v-model="numbersRef" :readonly="readonly">
        </DatesProp>
    </div>
</template>
<script setup lang="ts">
import { createVueDisposer, toReadonlyVueRef, toVR } from 'vue-xe2-plugin/dist-node/components/xe2/tools';
import { onBeforeUnmount } from "vue"
import DatesProp from "../commons/DatesProp.vue"
import { PropertyCompCallbackFuncParamsType } from "./base";

const props = withDefaults(defineProps<{
    property: any
}>(), {
})
const emits = defineEmits<{
    (e: 'callback', params: PropertyCompCallbackFuncParamsType): void;
}>();

const { property } = props
const readonly = property.readonly
const propertyName = property.name
const disposer = createVueDisposer(onBeforeUnmount)
const numbersRef = readonly ? toReadonlyVueRef<number[] | undefined>(disposer, property.reactVar, s => s && ([...s] as number[])) : toVR<number[] | undefined>(disposer, property.reactVar, s => s && ([...s] as number[]))

</script>

<style scoped>
.property {
    width: 100%;
    display: flex;
    align-items: center;
}

.readonly_true {
    cursor: not-allowed;
    cursor: no-drop;
}
</style>